<template>
	<view>
		<view class="main-foot-bigBox">
			<view class="main-foot-box" v-for="(item,index) in recordsXptj" :key="index">
				<image :src="item.pic"></image>
				<view class="main-foot-title">
					{{item.prodName}}
				</view>
				<view class="rihgt-foot">
					<view class="right-foot-l">
						￥{{item.price}} <text>.00</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var http = require("../../utils/http");
	export default {
		data() {
			return {
				sts: null,
				recordsXptj: [],
			}
		},
		methods: {
			handleServe() {
				if (this.sts == 1) {
					http.request({
						url: "/prod/lastedProdPage",
						method: "get",
						data: {
							current: 1,
							size: 10
						},
						callBack: res => {
							this.recordsXptj = res.records
						}
					});
				} else if(this.sts==3){
					http.request({
						url: "/prod/moreBuyProdList",
						method: "get",
						data: {
							current: 1,
							size: 10
						},
						callBack: res => {
							this.recordsXptj = res.records
						}
					});
				} else if(this.sts==5){
					http.request({
						url: "/p/user/collection/prods",
						method: "get",
						data: {
							current: 1,
							size: 10
						},
						callBack: res => {
							this.recordsXptj = res.records
						}
					});
				}

			}
		},
		onLoad(option) {
			this.sts = option.sts
			console.log(this.sts);
			this.handleServe()
		},
	}
</script>

<style>
	.main-foot-bigBox {
		padding: 10px;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.main-foot-box {
			width: 45%;
			margin-bottom: 10px;
			box-shadow: 0px 3px 4px rgba(58, 134, 185, .2);

			image {
				width: 100%;
				height: 160px;
			}

			.main-foot-title {
				padding: 10px;
				height: 50px;
				/* 你要显示几行 */
				-webkit-line-clamp: 2;
				/* 超出隐藏 */
				overflow: hidden;
				/* 显示省略号 */
				text-overflow: ellipsis;
				/* 自动伸缩你设置的行数的高度 */
				display: -webkit-box;
				/* 设置这个盒子的排列方式 */
				-webkit-box-orient: vertical;
			}
		}
	}

	.rihgt-foot {
		padding: 10px;
		color: #f00;
		display: flex;
		justify-content: space-between;
		align-items: center;

		text {
			font-size: 12px;
		}

		.right-foot-r {
			.image {
				width: 24px;
				height: 24px;
			}
		}
	}
</style>